<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="addForm">
    <table>
        <tr>
           <td>评论内容：</td>
           <td> <textarea name="content" id="content"></textarea></td>
        </tr>
        <tr>
            <td>图片</td>
            <td>
                <label for="qimg">上传图片</label>
                <input type="file"class="form-control" name="myFile" id="qimg">
                <input type="text" name="pic" id="pic">
            </td>
        </tr>
        <tr>
            <td>打分：</td>
            <td>
                <select id="scoreId" name="starts">
                <option value="1">★</option>
                <option value="2">★★</option>
                <option value="3">★★★</option>
                <option value="4">★★★★</option>
                <option value="5">★★★★★</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>等级</td>
            <td>
                <input type="radio" class="level" name="level" value="5" >好评
                <input type="radio" class="level" name="level" value="3">中评
                <input type="radio" class="level" name="level" value="1">差评
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="评论" onclick="insert()">
            </td>
        </tr>
    </table>

</form>

</body>
<script type="text/javascript" src="../js/plugins/jquery/jquery.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<!--bootstrap-fileinput-->
<link rel="stylesheet" type="text/css" href="../js/bootstrap-fileinput/css/fileinput.css">
<script type="text/javascript" src="../js/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="../js/bootstrap-fileinput/js/locales/zh.js"></script>
<script th:inline="javascript">
    $(function () {
            $('#qimg').fileinput({
                language: 'zh',
                uploadUrl: '/imageController/upLoadFile',
                maxFileCount :3, // 最多同时传送几个图片，需要加multiple注解
                enctype : 'multipart/form-data',
                maxFileSize : 1024, //单位为kb
                allowedFileExtensions : ['jpg', 'gif', 'png'],
                browseClass: 'btn btn-primary'
            });

            $('#qimg').on('fileuploaded',function(event, data, previewId, index){
                if(data.response){//如果有返回值 那么就最终结果就是true
                  //     var imgUrl = data.response.imgUrl;//原先上传图片
                    var imgUrl = data.response.data;//阿里云上传 setData(url)在后段方法里把url设置给了data，所以想拿到url就得.data
                    $("#pic").val(imgUrl);
                }
            })
        });

    function insert() {
        //alert(1111);
        var content=$("#content").val();
        var pic = $("#qimg").val();
        var score = $("#scoreId option:selected").val();
        //alert("score:"+score)
        var level = $(".level").val();
        //alert("leavel:"+level);
        $.ajax({
            url:"/comment/addComment",
            dataType:"json",
            type:"post",
        //    data:$("#addForm").serialize(),
            data:{content:content,pic:pic,score:score,level:level,id:[[${id}]]},
            success:function (result) {
                if (result.code==200){
                    alert("评论成功");
                    location.href="/homeIndex";
                }else {
                    alert("评论失败")
                }
            },
            error:function () {
                alert("系统错误")
            }
        })
    }
</script>
</html>